<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        
        div{

            /* 盒子的宽高虽然是200 300px但是加上padding的话，会撑开使盒子的宽高增大200 + 2*20 + 2*3 = 246px */
            /* css3.0新增，启动盒子的内减模式，使盒子的大小固定不变，不被撑开 */
            width: 200px;
            height: 300px;
            background: #cccccc;
            box-sizing: border-box;
            /* text-align: center; */

            /* padding: 上 右 下 左 复合属性的写法，或者top bottom left right分别设置 */
            /* padding: 10px 20px 10px; 上10px， 左右20px，下10px
            padding: 10px 20px; 上下padding是10px， 左右padding是20px*/
            padding: 20px;
            margin: 50px;

            /* border: 描边颜色， 描边粗细 线条种类; 部分先后顺序 */
            /* 分别设置top bottom left right的border */
            border: red 3px dashed;
            border-top: green 3px dashed;
            border-bottom: green 3px dashed;
        }

        div.box{
            width: 1200px;
            height: 300px;
            background: forestgreen;

            /* 上下0px，左右留白auto自适应,浏览器自己计算左右的margin */
            /* 浏览器的宽度是1800px的话，那么自适应(1800-1200)/2左右都是300px */
            /* margin auto生效的条件, 必须设置box的宽度，否则无法计算，还有标签必须换行，否则无法确定哪一个元素计算居中*/
            margin: 0 auto;
        }
    </style>

</head>
<body>
    

    <!-- 盒子模型中的3个属性, padding, margin, border -->
    <div>服装</div>

    <!-- 版心居中(有效内容的标签 div)， 版心的宽高根据设计师给的psd测量，不需要自己定义宽高 -->
    <div class="box"></div>


</body>
</html>